<template>
  <div class="all-t">
    <img src="https://img0.baidu.com/it/u=2150831822,1341766442&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
    <div class="all-char">
      <el-form
      :model="user"
      status-icon :rules="rules"
       ref="loginForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号" prop="userInfo">
        <el-input  v-model="user.userInfo" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
import { LoginPage } from '_api'
export default {
  name: 'LoginApp',
  // 组件内部守卫
  beforeRouteEnter (to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0')
    next()
  },
  data () {
    return {
      user: {
        userInfo: '',
        password: ''
      },
      rules: {
        userInfo: [

          {
            pattern: /[a-zA-Z]\w{4,12}/,
            requied: true,
            message: '账号必须输入且为英文开头的4-12个字节'
          }

        ]
      },
      password: [
        {
          requied: true,
          message: '密码必填'
        }
      ]
    }
  },
  methods: {
    submitForm () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 验证账号密码
          LoginPage(this.user).then((res) => {
            console.log(res)
            if (res.data.code === 200) {
              this.$message({
                showClose: true,
                message: '恭喜你，成功登录',
                duration: 1000,
                type: 'success',
                onClose: () => {
                  // 登录储存 传入vuex中
                  const { token, user, role } = res.data.data
                  localStorage.setItem('token', token)
                  localStorage.setItem('user', JSON.stringify(user))
                  localStorage.setItem('role', role)
                  this.$store.commit('user/LOGIN_USER', res.data.data)
                  this.$router.replace('./dashBoard')
                }
              })
            } else {
              return false
            }
          })
        }
      })
    },
    resetForm () {
      this.$refs.loginForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.all-t{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  img{
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top:0;
  }
  .all-char{
    min-width: 300px;
    width: 30%;
    padding: 30px;
    background-color: rgba(242, 137, 221, 0.5) ;
    // border: 1px solid black;
    position: absolute;
    left: 50%;
    top: 50%;
    box-shadow: 0px 0px 10px pink;
    transform: translateX(-50%)  translateY(-50%);
    z-index: 99;
    &:hover{
      transform: translateX(-50%)  translateY(-50%) scale(1.2);
    }
  }
}
</style>
